<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import SvgIcon from "@/components/SvgIcon/index.vue";

// 导入所需的API
import { getVideoCommentsApi } from "@/api/comment";
import { getUserInfoById } from "@/api/user";
import { getUserVideosApi } from "@/api/video";
import { addCommentApi, replyCommentApi, likeCommentApi } from "@/api/comment";

import { formatDate } from "@/utils/day";
import { ElMessage } from "element-plus";

// 获取用户store和路由
const userStore = useUserStore();
const router = useRouter();

// 添加作者数据缓存
const authorDataCache = ref(new Map()); // 缓存已加载的作者数据

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  videoId: {
    type: [Number, String],
    required: true,
  },
  video: {
    type: Object,
    default: null,
  },
});

const emit = defineEmits(["close", "follow", "commentUpdate", "switchVideo"]);

// Tab 切换相关
const activeTab = ref("comments"); // 'comments' 或 'author'

// 作者信息
const authorInfo = ref({
  id: null,
  username: "",
  avatar: "",
  follower_count: 0,
  bio: "",
});

// 作者的其他视频
const authorVideos = ref([]);
const videoPage = ref(1);
const videoLoading = ref(false);
const noMoreVideos = ref(false);

// 评论数据
const comments = ref([]);
const commentPage = ref(1);
const commentLoading = ref(false);
const noMoreComments = ref(false);

// 新增一个变量来跟踪当前加载的视频ID
const loadedVideoId = ref(null);

// 导航到个人中心
const goToUserProfile = () => {
  emit("close"); // 关闭面板
  router.push(`/mine`);
};

// 判断当前视频作者是否是当前登录用户
const isCurrentUser = computed(() => {
  if (!userStore.isLoggedIn() || !authorInfo.value || !authorInfo.value.id) {
    return false;
  }
  return String(authorInfo.value.id) === String(userStore.userInfo.id);
});

// 处理关注用户
const handleFollowUser = () => {
  emit("follow");
};

// 监听面板显示状态变化
watch(
  () => props.show,
  async (newVal) => {
    if (newVal && props.videoId) {
      // 面板被打开且有视频ID
      if (activeTab.value === "comments" && comments.value.length === 0) {
        await fetchComments();
      } else if (activeTab.value === "author" && props.video?.user?.id) {
        const authorId = props.video.user.id;
        const isSameAuthor = lastAuthorId.value === authorId;

        // 只有当作者变更或数据为空时才重新加载
        if (!isSameAuthor || authorVideos.value.length === 0) {
          await fetchAuthorInfo(authorId);
          await fetchAuthorVideos(authorId);
          lastAuthorId.value = authorId;
        }
      }
    }
  }
);

// 监听Tab切换
watch(
  () => activeTab.value,
  async (newVal) => {
    if (!props.show || !props.videoId) return;

    const authorId = props.video?.user?.id;

    // 加载相应Tab的数据
    if (newVal === "comments") {
      // 只有在评论列表为空时才加载评论数据
      if (comments.value.length === 0) {
        await fetchComments();
      }
    } else if (newVal === "author" && authorId) {
      // 判断是否需要加载新的作者数据
      const isSameAuthor = lastAuthorId.value === authorId;

      // 只有当作者变更或数据为空时才重新加载
      if (!isSameAuthor || authorVideos.value.length === 0) {
        // 重置视频加载状态
        videoPage.value = 1;
        noMoreVideos.value = false;

        await fetchAuthorInfo(authorId);
        await fetchAuthorVideos(authorId);

        // 更新上次加载的作者ID
        lastAuthorId.value = authorId;
      }
    }
  }
);

// 监听videoId变化，当ID变化时重新加载数据
watch(
  () => props.videoId,
  async (newId, oldId) => {
    if (!props.show || !newId || newId === oldId) return;

    // 记录当前加载的视频ID
    loadedVideoId.value = newId;

    // 重置评论相关状态
    comments.value = [];
    commentPage.value = 1;
    noMoreComments.value = false;
    expandedReplies.value.clear();

    // 根据当前活跃的tab加载数据
    if (activeTab.value === "comments") {
      await fetchComments();
    } else if (activeTab.value === "author" && props.video?.user?.id) {
      const authorId = props.video.user.id;
      const isSameAuthor = lastAuthorId.value === authorId;

      // 只有当作者变更时才重新加载作者数据
      if (!isSameAuthor) {
        // 重置视频加载状态
        videoPage.value = 1;
        noMoreVideos.value = false;
        authorVideos.value = [];

        await fetchAuthorInfo(authorId);
        await fetchAuthorVideos(authorId);

        // 更新上次加载的作者ID
        lastAuthorId.value = authorId;
      }
    }
  }
);

// 修改 Video 属性监听器，确保在视频对象变化时更新数据
watch(
  () => props.video,
  async (newVideo, oldVideo) => {
    if (!props.show || !newVideo) return;

    // 检查是否是同一个视频
    const newVideoId = String(newVideo.id || newVideo.video_id);
    const oldVideoId = oldVideo
      ? String(oldVideo.id || oldVideo.video_id)
      : null;

    if (newVideoId !== oldVideoId) {
      // 更新加载的视频ID
      loadedVideoId.value = newVideoId;

      // 重置评论数据
      comments.value = [];
      commentPage.value = 1;
      noMoreComments.value = false;
      expandedReplies.value.clear();

      // 根据当前活跃的tab加载数据
      if (activeTab.value === "comments") {
        await fetchComments();
      } else if (activeTab.value === "author" && newVideo.user?.id) {
        const authorId = newVideo.user.id;
        const isSameAuthor = lastAuthorId.value === authorId;

        // 只有当作者变更时才重新加载作者数据
        if (!isSameAuthor) {
          // 重置视频加载状态
          videoPage.value = 1;
          noMoreVideos.value = false;
          authorVideos.value = [];

          await fetchAuthorInfo(authorId);
          await fetchAuthorVideos(authorId);

          // 更新上次加载的作者ID
          lastAuthorId.value = authorId;
        }
      }
    }
  },
  { deep: true }
);

// 加载评论
const fetchComments = async () => {
  if (commentLoading.value) return;

  commentLoading.value = true;
  try {
    const response = await getVideoCommentsApi(props.videoId, {
      page: commentPage.value,
      limit: 10,
    });

    if (response && response.data && response.data.length > 0) {
      if (commentPage.value === 1) {
        // 第一页，替换数据并重置展开状态
        comments.value = response.data;
        expandedReplies.value.clear(); // 重置展开状态
      } else {
        // 追加数据
        comments.value = [...comments.value, ...response.data];
      }

      // 更新分页状态
      commentPage.value++;
      if (response.data.length < 10) {
        noMoreComments.value = true;
      }
    } else {
      if (commentPage.value === 1) {
        comments.value = []; // 没有评论数据
      }
      noMoreComments.value = true;
    }
  } catch (error) {
    console.error("加载评论失败:", error);
    if (commentPage.value === 1) {
      comments.value = []; // 出错时清空数据
    }
  } finally {
    commentLoading.value = false;
  }
};

// 获取作者信息
const fetchAuthorInfo = async (userId) => {
  if (!userId) return;

  // 检查缓存中是否已有该作者信息
  if (authorDataCache.value.has(`author_${userId}`)) {
    console.log("从缓存加载作者信息:", userId);
    authorInfo.value = authorDataCache.value.get(`author_${userId}`);
    return;
  }

  try {
    const response = await getUserInfoById(userId);
    if (response) {
      authorInfo.value = response;
      // 存入缓存
      authorDataCache.value.set(`author_${userId}`, response);
    }
  } catch (error) {
    console.error("加载作者信息失败:", error);
  }
};

// 获取作者的其他视频
const fetchAuthorVideos = async (userId) => {
  if (videoLoading.value || noMoreVideos.value || !userId) return;

  // 如果是第一页且缓存中有数据，直接使用缓存
  if (
    videoPage.value === 1 &&
    authorDataCache.value.has(`videos_${userId}_1`)
  ) {
    console.log("从缓存加载作者视频第一页:", userId);
    authorVideos.value = authorDataCache.value.get(`videos_${userId}_1`);
    videoPage.value = 2; // 准备加载第二页
    return;
  }

  videoLoading.value = true;
  try {
    const response = await getUserVideosApi(userId, {
      page: videoPage.value,
      limit: 10,
    });

    if (response && response.data && response.data.length > 0) {
      if (videoPage.value === 1) {
        // 第一页，替换数据
        authorVideos.value = response.data;
        // 存入缓存
        authorDataCache.value.set(`videos_${userId}_1`, [...response.data]);
      } else {
        // 追加数据
        authorVideos.value = [...authorVideos.value, ...response.data];
      }

      // 更新分页状态
      videoPage.value++;
      if (response.data.length < 10) {
        noMoreVideos.value = true;
      }
    } else {
      if (videoPage.value === 1) {
        authorVideos.value = []; // 没有视频数据
      }
      noMoreVideos.value = true;
    }
  } catch (error) {
    console.error("加载作者视频失败:", error);
  } finally {
    videoLoading.value = false;
  }
};

const lastAuthorId = ref(null);

// 加载更多评论
const loadMoreComments = () => {
  if (!noMoreComments.value) {
    fetchComments();
  }
};

// 监听评论列表滚动
const handleCommentScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.target;
  // 当滚动到底部附近时加载更多
  if (
    scrollHeight - scrollTop - clientHeight < 100 &&
    !commentLoading.value &&
    !noMoreComments.value
  ) {
    loadMoreComments();
  }
};

// 加载更多作者视频
const loadMoreVideos = () => {
  if (!noMoreVideos.value && props.video?.user?.id) {
    fetchAuthorVideos(props.video.user.id);
  }
};

// 评论输入
const commentText = ref("");
const replyingTo = ref(null); // 正在回复的评论
const replyingParentId = ref(null); // 记录回复二级评论时的一级评论ID

// 提交评论
const submitComment = async () => {
  if (!commentText.value.trim()) return;

  try {
    if (replyingTo.value) {
      if (replyingParentId.value) {
        // 回复二级评论（仍然作为二级评论添加到对应的一级评论下）
        const response = await replyCommentApi({
          videoId: props.videoId,
          parentId: replyingParentId.value, // 一级评论ID
          replyToUserId: replyingTo.value.user.id, // 被回复的用户ID
          content: commentText.value,
        });
        if (response) {
          // 找到对应的一级评论并添加回复
          const mainComment = comments.value.find(
            (c) => c.id === replyingParentId.value
          );
          if (mainComment) {
            mainComment.replies.push(response);
            emit("commentUpdate", 1);
          }
        }
      } else {
        // 添加二级评论（回复一级评论）
        const response = await replyCommentApi({
          videoId: props.videoId,
          parentId: replyingTo.value.id, // 一级评论ID
          content: commentText.value,
        });

        if (response) {
          // 找到对应的一级评论并添加回复
          const mainComment = comments.value.find((c) => {
            return c.id == replyingTo.value.id;
          });
          if (mainComment) {
            mainComment.replies.push(response);
            // 通知评论数增加
            emit("commentUpdate", 1);
          }
        }
      }
    } else {
      // 添加一级评论
      const response = await addCommentApi({
        videoId: props.videoId,
        content: commentText.value,
      });

      if (response) {
        response.replies = []; // 初始化回复列表
        // 将新评论添加到列表开头
        comments.value.unshift(response);
        // 通知评论数增加
        emit("commentUpdate", 1);
      }
    }

    // 清空输入和回复状态
    commentText.value = "";
    replyingTo.value = null;
    replyingParentId.value = null;

    // 提示评论成功
    ElMessage.success("发布评论成功");
  } catch (error) {
    console.error("提交评论失败:", error);
  }
};

// 回复评论
const replyToComment = (comment, parentId = null) => {
  replyingTo.value = comment;
  replyingParentId.value = parentId;
  commentText.value = "";
  // 聚焦输入框
  setTimeout(() => {
    document.querySelector(".comment-input").focus();
  }, 50);
};

// 取消回复
const cancelReply = () => {
  replyingTo.value = null;
  replyingParentId.value = null;
  commentText.value = "";
};

// 点赞评论
const likeComment = (comment) => {
  comment.likeCount++;
};

// 监听视频列表滚动
const handleVideoScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.target;
  // 当滚动到底部附近时加载更多
  if (
    scrollHeight - scrollTop - clientHeight < 100 &&
    !videoLoading.value &&
    !noMoreVideos.value
  ) {
    loadMoreVideos();
  }
};

// 二级评论
// 添加一个Map来跟踪每个评论的回复展开状态
const expandedReplies = ref(new Map());

// 切换回复的展开/折叠状态
const toggleRepliesExpand = (commentId) => {
  if (expandedReplies.value.has(commentId)) {
    expandedReplies.value.delete(commentId);
  } else {
    expandedReplies.value.set(commentId, true);
  }
};

// 检查评论的回复是否已展开
const isRepliesExpanded = (commentId) => {
  return expandedReplies.value.has(commentId);
};

// 添加判断是否是当前播放视频的方法
const isCurrentPlayingVideo = (video) => {
  if (!props.video || !video) return false;

  // 统一将ID转换为字符串进行比较
  const currentVideoId = String(props.video.id || props.video.video_id || "");
  const cardVideoId = String(video.id || video.video_id || "");

  // 确保ID不为空再进行比较
  return currentVideoId && cardVideoId && currentVideoId === cardVideoId;
};

// 修改切换视频的方法
const switchToVideo = (video) => {
  if (!video) return;

  // 统一使用字符串格式的ID
  const targetVideoId = String(video.id || video.video_id);
  const currentVideoId = props.video
    ? String(props.video.id || props.video.video_id)
    : "";

  console.log(`尝试切换视频: 当前=${currentVideoId}, 目标=${targetVideoId}`);

  if (!targetVideoId || targetVideoId === currentVideoId) {
    console.log("相同视频或无效视频ID，无需切换");
    return;
  }

  // 创建一个新的视频对象，确保包含所有必要字段
  emit("switchVideo", {
    ...video,
    id: targetVideoId,
    video_id: targetVideoId,
  });
};

// 添加格式化视频时长的函数
const formatVideoDuration = (seconds) => {
  if (!seconds) return "00:00";
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, "0")}:${secs
    .toString()
    .padStart(2, "0")}`;
};

onMounted(() => {
  // 当面板已经显示且有视频ID时，加载初始数据
  if (props.show && props.videoId) {
    loadedVideoId.value = props.videoId;

    if (activeTab.value === "comments") {
      fetchComments();
    } else if (activeTab.value === "author" && props.video?.user?.id) {
      fetchAuthorInfo(props.video.user.id);
      fetchAuthorVideos(props.video.user.id);
    }
  }
});
</script>

<template>
  <div class="panel" :class="{ show: show }">
    <div class="panel-header">
      <div class="close-btn" @click="emit('close')">
        <SvgIcon icon-class="back" :size="36" />
      </div>

      <div class="tab-container">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'comments' }"
          @click="activeTab = 'comments'"
        >
          评论
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'author' }"
          @click="activeTab = 'author'"
        >
          作者
        </div>
      </div>
    </div>

    <!-- 评论区 -->
    <div
      v-show="activeTab === 'comments'"
      class="tab-content comments-container"
      @scroll="handleCommentScroll"
    >
      <!-- 添加加载指示器 -->
      <div v-if="commentLoading && commentPage === 1" class="initial-loading">
        <div class="loading-spinner"></div>
        <span>正在加载评论...</span>
      </div>
      <!-- 添加空评论状态提示 -->
      <div
        v-if="!commentLoading && (!comments || comments.length === 0)"
        class="empty-comments"
      >
        <div class="empty-icon">
          <SvgIcon icon-class="comment" :size="48" />
        </div>
        <div class="empty-text">暂无评论，快来抢沙发吧！</div>
      </div>
      <div class="comment-item" v-for="comment in comments" :key="comment.id">
        <img :src="comment.user.avatar" alt="avatar" class="comment-avatar" />
        <div class="comment-content">
          <div class="comment-author">{{ comment.user.username }}</div>
          <div class="comment-text">{{ comment.content }}</div>
          <div class="comment-info">
            <span class="comment-time">{{
              formatDate(comment.createdAt)
            }}</span>
            <div class="comment-actions">
              <div class="comment-reply" @click="replyToComment(comment)">
                <SvgIcon icon-class="reply" :size="16" />
                <span>回复</span>
              </div>
              <!-- <div class="comment-like" @click="likeComment(comment)">
                <SvgIcon icon-class="like-small" :size="16" />
                <span>{{ comment.likeCount || 1314 }}</span>
              </div> -->
            </div>
          </div>

          <!-- 修改回复列表部分 -->
          <div
            class="replies-container"
            v-if="comment.replies && comment.replies.length > 0"
          >
            <!-- 只显示前三条回复，或者全部回复（如果已展开） -->
            <div
              class="reply-item"
              v-for="(reply, index) in isRepliesExpanded(comment.id)
                ? comment.replies
                : comment.replies.slice(0, 3)"
              :key="reply.id"
            >
              <img :src="reply.user.avatar" alt="avatar" class="reply-avatar" />
              <div class="reply-content">
                <div class="reply-author">
                  {{ reply.user.username }}
                  <span v-if="reply.replyToUser" class="reply-to"
                    >回复 @{{ reply.replyToUser.username }}</span
                  >
                </div>
                <div class="reply-text">{{ reply.content }}</div>
                <div class="reply-info">
                  <span class="reply-time">{{
                    formatDate(reply.createdAt)
                  }}</span>
                  <div class="reply-actions">
                    <div
                      class="reply-action-reply"
                      @click="replyToComment(reply, comment.id)"
                    >
                      <SvgIcon icon-class="reply" :size="14" />
                      <span>回复</span>
                    </div>
                    <!-- <div class="reply-like" @click="likeComment(reply)">
                      <SvgIcon icon-class="like-small" :size="16" />
                      <span>{{ reply.likeCount || 520 }}</span>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>

            <!-- 添加"查看更多"按钮 -->
            <div
              v-if="
                comment.replies.length > 3 && !isRepliesExpanded(comment.id)
              "
              class="view-more-replies"
              @click="toggleRepliesExpand(comment.id)"
            >
              <div class="view-more-line"></div>
              <span>查看全部 {{ comment.replies.length }} 条回复</span>
              <div class="view-more-line"></div>
            </div>

            <!-- 添加"收起回复"按钮 -->
            <div
              v-if="isRepliesExpanded(comment.id) && comment.replies.length > 3"
              class="view-more-replies collapse"
              @click="toggleRepliesExpand(comment.id)"
            >
              <div class="view-more-line"></div>
              <span>收起回复</span>
              <div class="view-more-line"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加加载提示和无更多评论提示 -->
      <div v-if="commentLoading" class="loading-more">
        <div class="loading-spinner"></div>
        <span>加载中...</span>
      </div>

      <div
        v-if="noMoreComments && comments.length > 0"
        class="no-more-comments"
      >
        没有更多评论了
      </div>
    </div>

    <!-- 作者信息区 -->
    <div
      v-show="activeTab === 'author'"
      class="tab-content author-container"
      style="overflow-y: hidden"
    >
      <div class="author-profile">
        <img
          :src="authorInfo.avatar"
          alt="作者头像"
          class="author-avatar"
          loading="lazy"
        />
        <div class="author-info">
          <div class="author-name">{{ authorInfo.username }}</div>
          <div class="author-followers">
            <span>粉丝：</span>
            {{ authorInfo.follower_count }}
          </div>
          <div class="author-description">{{ authorInfo.bio }}</div>
          <!-- 根据用户身份动态显示按钮 -->
          <button
            v-if="isCurrentUser"
            class="follow-btn"
            @click="goToUserProfile"
          >
            前往个人中心
          </button>
          <button v-else class="follow-btn" @click="handleFollowUser">
            {{ video?.isFollowed ? "已关注" : "关注" }}
          </button>
        </div>
      </div>

      <div class="section-title">
        {{ isCurrentUser ? "我的视频" : "TA的其他视频" }}
      </div>

      <div class="author-videos-container" @scroll="handleVideoScroll">
        <div class="videos-grid">
          <div
            v-for="video in authorVideos"
            :key="video.id || video.video_id"
            class="video-card"
            :class="{ 'playing-now': isCurrentPlayingVideo(video) }"
            @click="switchToVideo(video)"
          >
            <div class="video-cover-wrapper">
              <img
                :src="video.cover_url || video.coverUrl"
                :alt="video.title"
                class="video-cover"
                loading="lazy"
              />
              <div class="video-info-overlay">
                <div
                  v-if="isCurrentPlayingVideo(video)"
                  class="playing-indicator"
                >
                  正在播放
                </div>
                <span class="video-duration">{{
                  formatVideoDuration(video.duration)
                }}</span>
              </div>
            </div>
            <div class="video-title">{{ video.title }}</div>
          </div>
        </div>

        <div v-if="videoLoading" class="loading-more">
          <div class="loading-spinner"></div>
          <span>加载中...</span>
        </div>

        <div
          v-if="noMoreVideos && authorVideos.length > 0"
          class="no-more-videos"
        >
          没有更多视频了
        </div>
      </div>
    </div>

    <!-- 评论输入区 (仅当在评论Tab时显示) -->
    <div class="comment-input-wrapper" v-if="activeTab === 'comments'">
      <div class="replying-to" v-if="replyingTo">
        回复 @{{ replyingTo.user.username }}
        <span class="cancel-reply" @click="cancelReply">取消</span>
      </div>
      <input
        type="text"
        v-model="commentText"
        placeholder="添加评论..."
        class="comment-input"
        @keyup.enter="submitComment"
      />
      <button
        class="send-btn"
        @click="submitComment"
        :disabled="!commentText.trim()"
      >
        发送
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.initial-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;

  .loading-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #e6e6e6;
    border-top-color: #3490dc;
    border-radius: 50%;
    margin-bottom: 12px;
    animation: spin 0.8s linear infinite;
  }

  span {
    font-size: 14px;
    color: #666;
  }
}

.panel {
  position: relative;
  width: 0;
  height: 100%;
  background-color: #fafafa;
  z-index: 99;
  // transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
  //   transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);

  &.show {
    pointer-events: auto;
  }

  @media (min-width: 768px) {
    &.show {
      width: 400px;
    }
  }

  @media (max-width: 767px) {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    background-color: #fff;

    &.show {
      transform: translateX(-100%);
    }
  }

  .panel-header {
    height: 52px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #eeeeee;
    padding: 0 16px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    .close-btn {
      position: absolute;
      left: 16px;
      cursor: pointer;
      color: #666;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f0f0f0;
      }

      &:active {
        background-color: #e8e8e8;
      }
    }

    .tab-container {
      display: flex;
      margin: 0 auto;

      .tab-item {
        padding: 0 20px;
        height: 52px;
        line-height: 52px;
        font-size: 16px;
        color: #666;
        cursor: pointer;
        position: relative;
        transition: color 0.3s, font-weight 0.3s;

        &:hover:not(.active) {
          color: #23669c;
        }

        &.active {
          color: #3490dc;
          font-weight: 600;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 20%;
            width: 60%;
            height: 3px;
            background-color: #3490dc;
            border-radius: 2px;
            transition: width 0.2s;
          }
        }
      }
    }
  }

  .tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;

    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;

      &:hover {
        background: #aaa;
      }
    }

    /* Firefox 滚动条 */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
  }

  .comments-container {
    padding: 8px 0 8px 0;

    /* 添加空评论状态样式 */
    .empty-comments {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      color: #999;
      text-align: center;

      .empty-icon {
        margin-bottom: 16px;
        color: #ddd;

        /* 如果没有适合的图标，可以使用自定义样式 */
        &::before {
          content: "";
          display: block;
          width: 48px;
          height: 48px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ddd'%3E%3Cpath d='M21 6h-8a1 1 0 0 0-.8.4l-1.2 1.6-1.2-1.6A1 1 0 0 0 9 6H3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM7 18v-4h10v4H7z'/%3E%3C/svg%3E");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          margin: 0 auto;
        }
      }

      .empty-text {
        font-size: 16px;
        line-height: 1.5;
      }
    }
    .loading-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 0;
      color: #666;
      font-size: 14px;

      .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid #e6e6e6;
        border-top-color: #3490dc;
        border-radius: 50%;
        margin-right: 8px;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    }

    .no-more-comments {
      text-align: center;
      padding: 12px 0;
      color: #999;
      font-size: 13px;
    }
    .comment-item {
      display: flex;
      margin-bottom: 8px;
      transition: transform 0.2s;
      padding: 8px 8px 0 8px;
      border-radius: 8px;

      &:hover {
        background-color: #f9f9f9;
      }

      .comment-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        margin-right: 8px;
        flex-shrink: 0;
        border: 1px solid #eee;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s;

        &:hover {
          transform: scale(1.05);
        }
      }

      .comment-content {
        flex: 1;
        overflow: hidden;

        .comment-author {
          font-size: 15px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
          display: inline-block;

          &:hover {
            color: #3490dc;
            cursor: pointer;
          }
        }

        .comment-text {
          font-size: 14px;
          color: #333;
          line-height: 1.5;
          margin-bottom: 4px;
          word-break: break-word;
        }

        .comment-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .comment-time {
            font-size: 12px;
            color: #999;
          }

          .comment-actions {
            display: flex;
            align-items: center;

            .comment-reply,
            .comment-like {
              display: flex;
              align-items: center;
              cursor: pointer;
              margin-left: 16px;
              padding: 4px 6px;
              border-radius: 4px;
              transition: background-color 0.2s;

              &:hover {
                background-color: #f0f0f0;
              }

              span {
                font-size: 13px;
                color: #666;
                margin-left: 4px;
                transition: color 0.2s;
              }

              &:hover span {
                color: #3490dc;
              }
            }
          }
        }

        .replies-container {
          border-left: 2px solid #f0f0f0;
          margin-left: 4px; /* 添加左侧边距，与竖线对齐 */
          padding-left: 8px; /* 为内容添加左侧边距 */
          .view-more-replies {
            display: flex;
            align-items: center;
            padding: 6px 0;
            margin-top: 4px;
            cursor: pointer;
            transition: background-color 0.2s;

            &:hover {
              background-color: #f9f9f9;
            }

            span {
              font-size: 13px;
              color: #3490dc;
              margin: 0 8px;
              white-space: nowrap;
            }

            .view-more-line {
              flex: 1;
              height: 1px;
              background-color: #eee;
            }

            &.collapse {
              span {
                color: #999;
              }
            }
          }
          .reply-item {
            display: flex;
            margin-bottom: 12px;
            padding: 6px;
            border-radius: 6px;
            transition: background-color 0.2s;

            &:hover {
              background-color: #f5f5f5;
            }

            .reply-avatar {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              margin-right: 8px;
              flex-shrink: 0;
              border: 1px solid #eee;
              object-fit: cover;
              transition: transform 0.2s;

              &:hover {
                transform: scale(1.05);
              }
            }

            .reply-content {
              flex: 1;
              overflow: hidden;

              .reply-author {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 2px;

                &:hover {
                  color: #3490dc;
                  cursor: pointer;
                }

                .reply-to {
                  font-weight: normal;
                  color: #3498db;
                  margin-left: 4px;
                  font-size: 13px;

                  &:hover {
                    text-decoration: underline;
                    cursor: pointer;
                  }
                }
              }

              .reply-text {
                font-size: 13px;
                color: #333;
                line-height: 1.4;
                margin-bottom: 4px;
                word-break: break-word;
              }

              .reply-info {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .reply-time {
                  font-size: 12px;
                  color: #999;
                }
                .reply-actions {
                  display: flex;
                  align-items: center;

                  .reply-action-reply,
                  .reply-like {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    padding: 3px 5px;
                    border-radius: 4px;
                    transition: background-color 0.2s;
                    margin-left: 8px;

                    &:hover {
                      background-color: #f0f0f0;
                    }

                    span {
                      font-size: 12px;
                      color: #666;
                      margin-left: 4px;
                      transition: color 0.2s;
                    }

                    &:hover span {
                      color: #3490dc;
                    }
                  }
                }

                .reply-like {
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  padding: 3px 5px;
                  border-radius: 4px;
                  transition: background-color 0.2s;

                  &:hover {
                    background-color: #f0f0f0;
                  }

                  span {
                    font-size: 12px;
                    color: #666;
                    margin-left: 4px;
                    transition: color 0.2s;
                  }

                  &:hover span {
                    color: #3490dc;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .author-container {
    padding: 0 8px 0 8px;

    .author-profile {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 12px 0;
      background-color: #fdfdfd;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

      .author-avatar {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        margin-right: 16px;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }

      .author-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .author-name {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
          &:hover {
            color: #3490dc;
            cursor: pointer;
          }
        }

        .author-followers {
          font-size: 14px;
          color: #666;
          display: flex;
          align-items: center;
          margin-bottom: 8px;
        }

        .author-description {
          font-size: 14px;
          color: #666;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 8px;
        }

        .follow-btn {
          background-color: #3490dc;
          color: white;
          border: none;
          border-radius: 6px;
          padding: 8px 18px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: background-color 0.2s, transform 0.1s;
          box-shadow: 0 2px 4px rgba(255, 64, 64, 0.2);

          &:hover {
            background-color: #276faa;
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(255, 64, 64, 0.25);
          }

          &:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px rgba(255, 64, 64, 0.15);
          }
        }
      }
    }

    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #3490dc;
        border-radius: 1.5px;
      }
    }
    .author-videos-container {
      height: calc(100% - 210px);
      overflow-y: auto;
      padding: 0 4px;
      margin-bottom: 16px;

      /* 自定义滚动条 */
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;

        &:hover {
          background: #aaa;
        }
      }

      /* Firefox 滚动条 */
      scrollbar-width: thin;
      scrollbar-color: #ccc #f1f1f1;

      .videos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;

        @media (min-width: 400px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .video-card {
          display: flex;
          flex-direction: column;
          cursor: pointer;
          transition: transform 0.2s;
          background-color: #fff;
          border-radius: 6px;
          overflow: hidden;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

          // 添加当前播放视频的样式
          &.playing-now {
            border: 2px solid #3490dc;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(52, 144, 220, 0.2);

            .video-cover {
              opacity: 0.8;
            }

            .video-title {
              color: #3490dc;
              font-weight: 600;
            }
          }

          .video-cover-wrapper {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 140%; /* 高度大于宽度的比例 */
            overflow: hidden;
            border-radius: 6px 6px 0 0;

            .video-cover {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s;
            }

            .video-info-overlay {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              padding: 6px 8px;
              background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.7),
                transparent
              );
              color: white;
              font-size: 12px;

              .playing-indicator {
                position: absolute;
                bottom: 8px;
                left: 8px;
                background-color: rgba(52, 144, 220, 0.9);
                color: #fff;
                border-radius: 12px;
                padding: 4px 8px;
                font-size: 12px;
                display: flex;
                align-items: center;
                gap: 4px;
              }

              .video-duration,
              .video-views {
                display: flex;
                align-items: center;

                span {
                  margin-left: 4px;
                }
              }
            }
          }

          .video-title {
            padding: 8px 8px 4px;
            font-size: 13px;
            font-weight: 500;
            color: #333;
            line-height: 1.4;
            max-height: 36px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-word;
          }

          .video-publish-time {
            padding: 0 8px 8px;
            font-size: 12px;
            color: #999;
          }
        }
      }

      .loading-more {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 0;
        color: #666;
        font-size: 14px;

        .loading-spinner {
          width: 20px;
          height: 20px;
          border: 2px solid #e6e6e6;
          border-top-color: #3490dc;
          border-radius: 50%;
          margin-right: 8px;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
      }

      .no-more-videos {
        text-align: center;
        padding: 12px 0;
        color: #999;
        font-size: 13px;
      }
    }
  }

  .comment-input-wrapper {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eee;
    background-color: white;
    position: relative;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);

    .replying-to {
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
      padding: 4px 0;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: #3490dc;
        margin-right: 6px;
        border-radius: 1.5px;
      }

      .cancel-reply {
        color: #3490dc;
        margin-left: 10px;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color 0.2s;

        &:hover {
          background-color: #fff0f0;
          text-decoration: underline;
        }
      }
    }

    .comment-input {
      flex: 1;
      height: 42px;
      border-radius: 21px;
      border: 1px solid #eee;
      padding: 0 18px;
      font-size: 14px;
      outline: none;
      margin-bottom: 10px;
      transition: border-color 0.3s, box-shadow 0.3s;

      &:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
      }

      &::placeholder {
        color: #aaa;
      }
    }

    .send-btn {
      width: 100%;
      height: 38px;
      border-radius: 19px;
      border: none;
      background-color: #3490dc;
      color: white;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
      box-shadow: 0 2px 4px rgba(255, 64, 64, 0.15);

      &:hover:not(:disabled) {
        background-color: #e03030;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(255, 64, 64, 0.2);
      }

      &:active:not(:disabled) {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(255, 64, 64, 0.1);
      }

      &:disabled {
        background-color: #ddd;
        color: #999;
        box-shadow: none;
        cursor: not-allowed;
      }
    }

    @media (min-width: 768px) {
      flex-direction: row;
      align-items: center;
      height: 66px;
      padding: 12px 16px;

      .replying-to {
        position: absolute;
        top: -24px;
        left: 16px;
        background-color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        margin-bottom: 0;
        border: 1px solid #f0f0f0;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.03);
      }

      .comment-input {
        margin-bottom: 0;
      }

      .send-btn {
        width: 70px;
        margin-left: 12px;
        height: 42px;
      }
    }
  }
}
</style>
